<template>
  <!-- <a-card>
    <div>
      <a-button @click="setCount">{{addCount}}--随机值([0, 1))</a-button>
    </div>
  </a-card> -->
  <a-row class="" style="width: 100%">
    <a-col class="col" :xl="18" :lg="24" :md="24" :sm="24" :xs="24">
      <a-card title="柱形图" style="" >
        <Map />
      </a-card>
    </a-col>
    <a-col class="col" :xl="6" :lg="24" :md="24" :sm="24" :xs="24">
      <a-card title="折线图" style="" >
        <Trend />
      </a-card>
      <a-card title="折线图" style="margin-top: 15px" >
        <Trend />
      </a-card>
    </a-col>
  </a-row>

  <a-row>
    <a-col class="col" :xl="12" :lg="24" :sm="24" :xs="24">
      <a-card title="饼图">
        <div style="display: flex">
          <Pie />
          <Pie />
          <Pie />
        </div>
      </a-card>
    </a-col>
    <a-col class="col" :xl="6" :lg="24" :sm="24" :xs="24">
      <a-card title="散点图">
        <Scatter />
      </a-card>
    </a-col>
    <a-col class="col" :xl="6" :lg="24" :sm="24" :xs="24">
      <a-card title="进度">
        <Gauge />
      </a-card>
    </a-col>
  </a-row>
</template>
<script lang="ts" setup>
import {ref, reactive, toRefs, computed, onMounted, onUnmounted} from 'vue'
import Map from './charts/Map.vue'
import Trend from './charts/Trend.vue'
import Pie from './charts/Pie.vue'
import Scatter from './charts/Scatter.vue'
import Gauge from './charts/Gauge.vue'

const count = ref(1)

const addCount = computed({
  // 获取值的时候触发
  get: () => count.value + 1,
  // 设置值的时候触发
  set: val => {
    count.value = val - 1
  }
})

const setCount = () => {
  addCount.value = Math.random()
}

onUnmounted(() => {
  window.removeEventListener('resize', () => {
    
  })
})

</script>
<style lang="scss" scoped>
.col {
  padding: 0 10px 0;
  margin-bottom: 20px;
}
</style>